import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import { useEffect } from 'react';

const nums1 = [1, 2, 7, 0, 0, 0];
let m = 3;
let n = 3;
const nums2 = [2, 5, 6]

const code1 = `
  const nums1 = [1, 2, 3, 0, 0, 0];
  let m = 3;
  let n = 3;
  const nums2 = [2, 5, 6];
`

const code2 = `
  const codeFn = () => {
    // 第一种方法，直接合并后排序
    // nums1.splice(m, n, ...nums2)
    // nums1.sort((a, b) => a - b)

    // 第二种方法，双指针逆向遍历
    let i = m - 1; // 可以理解成是 nums1 的下标（但不包括补0的部分）
    let j = n - 1; // 可以理解成是 nums2 的下标
    let k = m + n - 1; // 可以理解成是合并后数组的下标

    for (k; k >= 0; k--) {
      if (j < 0) {
        // nums2 已处理完了，就停止执行
        break
      }
      if (i >= 0 && nums1[i] > nums2[j]) {
        // 如果nums1[i] > nums2[j] 就用 nums1[i] 来作为 k 下标的值。并且赋值后，i 还需要减一
        nums1[k] = nums1[i]
        i--
      } else {
        // 如果nums1[i] < nums2[j] 就用 nums2[j] 来作为 k 下标的值。并且赋值后，j 还需要减一
        nums1[k] = nums2[j]
        j--
      }
    }

    console.log('nums1', nums1)
  }
`

function MergeArray() {

  const codeFn = () => {
    // 第一种方法，直接合并后排序
    // nums1.splice(m, n, ...nums2)
    // nums1.sort((a, b) => a - b)

    // 第二种方法，双指针逆向遍历
    let i = m - 1; // 可以理解成是 nums1 的下标（但不包括补0的部分）
    let j = n - 1; // 可以理解成是 nums2 的下标
    let k = m + n - 1; // 可以理解成是合并后数组的下标

    for (k; k >= 0; k--) {
      if (j < 0) {
        // nums2 已处理完了，就停止执行
        break
      }
      if (i >= 0 && nums1[i] > nums2[j]) {
        // 如果nums1[i] > nums2[j] 就用 nums1[i] 来作为 k 下标的值。并且赋值后，i 还需要减一
        nums1[k] = nums1[i]
        i--
      } else {
        // 如果nums1[i] < nums2[j] 就用 nums2[j] 来作为 k 下标的值。并且赋值后，j 还需要减一
        nums1[k] = nums2[j]
        j--
      }
    }

    console.log('nums1', nums1)
  }

  useEffect(() => {
    codeFn()
  }, [])

  return (
    <div>
      <p>合并两个有序的数组，给定两个非递减的有序数组 num1 和 nums2，合并 nums2 到 nums1 中，使合并后的的数组同样按非递减顺序排列。</p>
      <SyntaxHighlighter children={code1} />
      <p>代码实现逻辑：</p>
      <SyntaxHighlighter children={code2} />
    </div>
  )
}

export default MergeArray